<template>
  <div class="zwrapper" :class="type" v-wechat-title="title">
    <company-banner :type = type></company-banner>
    <company-tab :tabList = tabList :type = type></company-tab>
    <company-icon :type = type @is_show="is_show"></company-icon>
    <company-problem :type = type @is_show="is_show"></company-problem>
    <company-advantage :type = type></company-advantage>
    <company-provide :type = type @is_show="is_show"></company-provide>
    <company-artificial :type = type @is_show="is_show"></company-artificial>
    <company-shop :type = type @is_show="is_show"></company-shop>
    <company-talent :type = type @is_show="is_show"></company-talent>
    <company-consult :type = type></company-consult>
    <company-bottom :type = type></company-bottom>
    <company-bottomZ :type = type></company-bottomZ>
    <van-popup v-model="show" position="bottom" :style="{ height: '50%' ,padding: '.4rem' }">
      <van-form @submit="onSubmit">
      <div class="wrappericon">
        <div class="wrappericon_ul">
          <div class="input_name">联系方式</div>
          <van-field v-model="mobile" name="mobile" :rules="[{ required: true, pattern: phone , message: '请输入正确的联系电话' }]" placeholder="请输入联系方式" />
          <div class="input_name">姓名</div>
          <van-field v-model="name" name="name" :rules="[{ required: true, pattern: hanzi , message: '请输入正确的姓名' }]" placeholder="请输入姓名" />
          <div class="input_name">需求</div>
          <van-field name="type" class="radio">
            <template #input>
              <van-radio-group v-model="radio" direction="horizontal">
                <van-radio name="我要转店">我要转店</van-radio>
                <van-radio name="我要找店">我要找店</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field name="city" v-model="city" class="none" />
          <van-field name="from" value="手机站" class="none" />
        </div>
        <van-button round block type="info" native-type="submit" class="experience">
          立即提交
        </van-button>
      </div>
    </van-form>
    </van-popup>
  </div>
</template>

<script>
import CompanyBanner from './components/CompanyBanner'
import CompanyTab from './components/CompanyTab'
import CompanyIcon from './components/CompanyIcon'
import CompanyProblem from './components/CompanyProblem'
import CompanyAdvantage from './components/CompanyAdvantage'
import CompanyProvide from './components/CompanyProvide'
import CompanyArtificial from './components/CompanyArtificial'
import CompanyShop from './components/CompanyShop'
import CompanyTalent from './components/CompanyTalent'
import CompanyConsult from './components/CompanyConsult'
import CompanyBottom from './components/CompanyBottom'
import CompanyBottomZ from './components/CompanyBottomZ'
export default {
  name: 'zhuanti',
  data () {
    return {
      type: 'one',
      tabList: ['饭店', '足浴养生', '酒店宾馆', '酒吧歌厅'],
      title: '搜城商铺网',
      typeid: 0,
      show: false,
      mobile: '',
      name: '',
      radio: '转店',
      hanzi: /[\u4e00-\u9fa5]/,
      phone: /^(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$/,
      city: sessionStorage.getItem('Dcity')
    }
  },
  components: {
    CompanyBanner,
    CompanyTab,
    CompanyIcon,
    CompanyProblem,
    CompanyAdvantage,
    CompanyProvide,
    CompanyArtificial,
    CompanyShop,
    CompanyTalent,
    CompanyConsult,
    CompanyBottom,
    CompanyBottomZ
  },
  beforeMount () {
    let that = this
    if (that.$route.params.id === '1') {
      that.type = 'one'
      that.tabList = ['饭店', '足浴养生', '酒店宾馆', '酒吧歌厅']
    } else if (that.$route.params.id === '2') {
      that.type = 'two'
      that.tabList = ['美甲美睫', 'SPA养生', '美容美体', '美发']
    } else if (that.$route.params.id === '3') {
      that.type = 'there'
      that.tabList = ['培训机构', '婴儿游泳馆', '早教中心', '托管所']
    }
  },
  methods: {
    is_show () {
      this.show = true
    },
    onSubmit (values) {
      this.$axios.post(process.env.API_HOST + '/api/vip/feedback', values
      ).then(this.onSubmitSucc)
        .catch(error => console.log(error))
    },
    onSubmitSucc (res) {
      if (res.data.code === 1) {
        this.$toast('提交成功')
        setTimeout(function () {
          this.$router.push('/')
        }, 1000)
      } else {
        this.$toast('请检查网络后重试')
      }
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.zwrapper
  width 100%
  min-height 100%
  padding-bottom 8.8rem
  position relative
  overflow-x hidden
.zwrapper.one
  background #FEB285
  /deep/ .van-radio__icon--checked .van-icon
    background linear-gradient(-34deg, #DE570C, #B9480A)
    box-shadow 1px 1px 2px 0px rgba(185, 72, 10, 0.3)
  .experience
    background #B9480A
    border 2px solid #AD4309
    box-shadow 0px 3px 0px 0px rgba(126, 47, 4, 0.3)
.zwrapper.two
  background #FEB1B3
  /deep/ .van-radio__icon--checked .van-icon
    background linear-gradient(-34deg, #E13238, #EC070F)
    box-shadow 1px 1px 2px 0px rgba(195, 8, 14, 0.3)
  .experience
    background #C3080E
    border 2px solid #B4070B
    box-shadow 0px 3px 0px 0px rgba(167, 5, 9, 0.3)
.zwrapper.there
  background #BBD0FA
  /deep/ .van-radio__icon--checked .van-icon
    background linear-gradient(-34deg, #0A70B8, #085B95)
  .experience
    background #085B95
    border 2px solid #095194
    box-shadow 0px 3px 0px 0px rgba(93, 162, 223, 0.5)
.input_name
  font-weight bold
  font-size .26rem /* 13/50 */
.van-cell:after
  border-bottom 0px
.van-cell
  width 100%
  min-height .88rem /* 44/50 */
  border-radius .1rem /* 5/50 */
  border 1px solid rgba(0,0,0,.2)
  margin-bottom .4rem /* 20/50 */
  margin-top .2rem
.radio
  border 0px
  margin-bottom .2rem
  margin-top 0px
.van-radio-group
  width 100%
  .van-radio
    width 50%
    height .5rem /* 15/50 */
    line-height .5rem /* 15/50 */
    font-size .32rem /* 16/50 */
    margin-right 0px
    /deep/ .van-radio__icon
      height .26rem
      .van-icon
        width .26rem /* 13/50 */
        height .26rem /* 13/50 */
    /deep/ .van-radio__icon--checked .van-icon
      border 0px
    /deep/ .van-icon-success::before
      content: ""
.experience
  width 100%
  height 1rem /* 45/50 */
  line-height 1rem
  text-align center
  border-radius .1rem /* 5/50 */
  font-size .4rem /* 20/50 */
  font-weight bold
  color #fff
</style>
